@extends('backend.layout')
@section('style')
    <link href="/backend/css/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link href="/backend/css/plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">

@endsection
@section('content')
    @include('backend.elements.breadcrumbs')

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">

                        <div class="table-responsive">

                            <table id="table"
                                   data-toolbar="#toolbar"
                                   data-search="true"
                                   data-locale="en"
                                   data-show-refresh="true"
                                   data-show-toggle="true"
                                   data-show-columns="true"
                                   data-show-export="true"
                                   data-minimum-count-columns="2"
                                   data-show-pagination-switch="true"
                                   data-pagination="true"
                                   data-id-field="id"
                                   data-page-list="[10, 25, 50, 100, ALL]"
                                   data-show-footer="false"
                                   data-side-pagination="server"
                                   data-url="/api/photos?slide=1"
                                   data-ajax-options="ajaxOptions"
                                   data-response-handler="responseHandler">
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        window.ajaxOptions = {headers: { "Authorization": "Bearer {{ auth()->user()->api_token }}"}};
    </script>
    <script>
        var $table = $('#table'),
                $remove = $('#remove'),
                selections = [];

        function initTable() {
            $table.bootstrapTable({
                height: getHeight(),
                columns: [
                    [
                        {
                            field: 'state',
                            checkbox: true,
                            align: 'center',
                            valign: 'middle'
                        },
                        {
                            title: 'ID',
                            field: 'id',
                            align: 'center',
                            valign: 'middle',
                        },
                        {
                            field: 'image',
                            title: 'Photo',
                            formatter: imageFormatter,
                            align: 'center'
                        },
                        {
                            field: 'is_slide',
                            title: 'Homepage Slide',
                            align: 'center',
                            valign: 'middle',
                            formatter: slideFormatter,
                        },
                        {
                            field: 'operate',
                            title: 'Operation',
                            align: 'center',
                            valign: 'middle',
                            formatter: operateFormatter
                        }
                    ]
                ]
            });
            // sometimes footer render error.
            setTimeout(function () {
                $table.bootstrapTable('resetView');
            }, 200);
            $table.on('check.bs.table uncheck.bs.table ' +
                    'check-all.bs.table uncheck-all.bs.table', function () {
                $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);

                // save your data, here just save the current page
                selections = getIdSelections();
                // push or splice the selections if you want to save all data selections
            });
            $table.on('expand-row.bs.table', function (e, index, row, $detail) {
                if (index % 2 == 1) {
                    $detail.html('Loading from ajax request...');
                    $.get('LICENSE', function (res) {
                        $detail.html(res.replace(/\n/g, '<br>'));
                    });
                }
            });
            $table.on('all.bs.table', function (e, name, args) {
                console.log(name, args);
            });
            $remove.click(function (e) {
                e.preventDefault();
                var ids = getIdSelections();
                var $form= $(this).closest('form');
                bootbox.confirm({
                    message: "Delete Confirmation",
                    buttons: {
                        confirm: {
                            label: 'Yes',
                            className: 'btn-success'
                        },
                        cancel: {
                            label: 'No',
                            className: 'btn-danger'
                        }
                    },
                    callback: function (result) {
                        if(result) {
                            $('#batch-delete').val(ids.toString());
                            $form.submit();
                        }
                    }
                });
            });
            $(window).resize(function () {
                $table.bootstrapTable('resetView', {
                    height: getHeight()
                });
            });
        }

        function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id
            });
        }

        function responseHandler(res) {
            let data = {};
            data.rows = res.data;
            data.total = res.data.length;

            $.each(data.rows, function (i, row) {
                row.state = $.inArray(row.id, selections) !== -1;
            });
            return data;
        }

        function detailFormatter(index, row) {
            var html = [];
            $.each(row, function (key, value) {
                html.push('<p><b>' + key + ':</b> ' + value + '</p>');
            });
            return html.join('');
        }

        function operateFormatter(value, row, index) {
            return [
                '<a href="/admin/photos/',
                row.id,
                '/slide" class="btn btn-success btn-sm">Slide</a>  ',
            ].join('');
        }

        function imageFormatter(value, row, index, field) {
            return '<img src="' + value + '" class="img-preview-sm">';
        }

        function slideFormatter(value, row, index, field) {
            return value ? 'Yes' : 'No';
        }

        function getHeight() {
            return $(window).height() - $('h1').outerHeight(true);
        }

        $(function () {
            var scripts = [
                        '/backend/js/plugins/bootstrap-table/bootstrap-table.js',
                        '/backend/js/plugins/bootstrap-table/bootstrap-table-export.js',
//                        '/backend/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js'
                    ],
                    eachSeries = function (arr, iterator, callback) {
                        callback = callback || function () {};
                        if (!arr.length) {
                            return callback();
                        }
                        var completed = 0;
                        var iterate = function () {
                            iterator(arr[completed], function (err) {
                                if (err) {
                                    callback(err);
                                    callback = function () {};
                                }
                                else {
                                    completed += 1;
                                    if (completed >= arr.length) {
                                        callback(null);
                                    }
                                    else {
                                        iterate();
                                    }
                                }
                            });
                        };
                        iterate();
                    };
            eachSeries(scripts, getScript, initTable);
        });
        function getScript(url, callback) {
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.src = url;
            var done = false;
            // Attach handlers for all browsers
            script.onload = script.onreadystatechange = function() {
                if (!done && (!this.readyState ||
                        this.readyState == 'loaded' || this.readyState == 'complete')) {
                    done = true;
                    if (callback)
                        callback();
                    // Handle memory leak in IE
                    script.onload = script.onreadystatechange = null;
                }
            };
            head.appendChild(script);
            // We handle everything using the script element injection
            return undefined;
        }
    </script>
@endsection